<template>
  <div>
    <div :id="id" :style="style"></div>
  </div>
</template>
<script>
  // 引入 ECharts 主模块
  let echarts = require('echarts/lib/echarts');
  // 引入柱状图
  require('echarts/lib/chart/radar');
  // 引入提示框和标题组件
  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/title');

  export default {
    props: {
      id: {
        type: String,
        default: 'chartRadar'
      },
      height: {
        type: [String, Number],
        default: '400'
      },
      width: {
        type: [String, Number],
        default: '600'
      },
      chartData: {
        type: Object,
        validator: function (value) {
          return value.data && value.value;
        },
        required: true
      }
    },
    computed: {
      style: function () {
        return {width: this.width, height: this.height}
      },
      option: function () {
        return {
          title: {
            text: ''
          },
          tooltip: {
            confine: true,
            enterable: true, //鼠标是否可以移动到tooltip区域内
          },
          // 图表的位置
          grid: {
            position: 'center',
          },
          legend: {
            data: ['学科均衡']
          },
          radar: {
            // shape: 'circle',
            name: {
              textStyle: {
                color: '#ffffff',
                // backgroundColor: '#999',
                borderRadius: 3,
                padding: [3, 5],
                fontSize: 28
              }
            },
            nameGap: 10,
            axisLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#1575a3',
                type: 'dashed'
              }
            },
            splitArea: {
              areaStyle: {
                color: '#0e4a67'
              }
            },
            indicator: this.optionData
            // radius: 99 // 缩放比
          },
          series: [{
            name: '学科均衡',
            type: 'radar',
            // areaStyle: {
            //   normal: {
            // color: '#c947ff'
            // }
            // },
            data: [
              {
                value: this.optionValue,
                name: '学科均衡'
              }
            ],
            lineStyle: {
              color: '#c947ff'
            },
            label: {
              show: true,
              color: '#ff9697',
              fontSize: 24,
              formatter:function(params) {
                return Math.floor(params.value * 100) / 100;
              }

            },
          }],
          backgroundColor: '#092f41',
          animation: false
        }
      }
    },
    watch: {
      chartData: {
        handler: function (val, oldVal) {    // 监听charData，当发生变化时，触发这个回调函数绘制图表
          console.log('radar:--');
          this.optionData = val.data
          this.optionValue = val.value
          this.draw()
        },
        deep: true
      }
    },
    data() {
      return {
        myEcharts: {},
        optionData: [],
        optionValue: []
      };
    },
    methods: {
      draw() {
        // 基于准备好的dom，初始化echarts实例
        this.myEcharts = echarts.init(document.getElementById(this.id));
        // 绘制图表
        this.myEcharts.setOption(this.option)
      }
    },
    mounted() {
      // this.draw();
    }

  };
</script>
<style lang="less" scoped>
</style>
